import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import weui from 'weui.js';
import weixinShare from '../../lib/weixinShare';
import { addErrorListener } from '../../lib/handleError';

import AJAX from '../../lib/ajax';

// import VConsole from 'vconsole/dist/vconsole.min.js' //import vconsole
// let vConsole = new VConsole() // 初始化

const Dialog = require('../MyPackage/components/Dialog')

require('../../lib/rem');
require('../../styles/common.less');
require('./Coupons.less');
require('../../styles/iconfont/iconfont.css');

class CouponsElem extends Component {
  constructor(props) {
    super(props)

    this.state = {
      isReady: false,     //是否可以加载页面
      userInfo: {},
      taskList: [],
    };
  }

  componentWillMount() {
    addErrorListener()()
    weixinShare.hideAll();
  }

  componentDidMount() {
    AJAX.request("user_home", {}, (data) => {
      if (data.code === 0) {
        this.setState({
          userInfo: data.body
        }, () => this.fetchCouponsList());
      }
    });
  }

  /** 获取任务列表 */
  fetchCouponsList = () => {
    const { userInfo = {} } = this.state;
    const { id, phone, unionid } = userInfo;
    if (id && phone && unionid) {
      const loading = weui.loading('加载中');
      AJAX.request("index_page_uv_stat");
      AJAX.request("can_apply_task_list", {}, (data) => {
        if (data.code === 0) {
          if (data.body) {
            const { list = [], logisId } = data.body;
            if ((!list || !list.length) && !logisId) {
              window.location.href = './CouponsUnAuth?type=2';
            } else {
              this.setState({
                taskList: list || [],
                isReady: true,
              });
            }
          }
        }
      }, './Coupons');
      loading.hide();
    } else window.location.href = './CouponsUnAuth?type=1';
  }

  render () {
    const {
      taskList = [],
    } = this.state;

    return (
      this.state.isReady &&
      <div className="coupons">
        <div className="coupons_header">
          <label className="header_title">券任务</label>
        </div>
        <div className="coupons_main">
          <div className="main_box">
            {taskList.length ? (
              <ul className="task_list">
              {taskList.map(item => (
                <li className="task_item" key={item.id}>
                  <a href={`./CouponsTask?taskId=${item.id}`}>
                    <div className="item_content">
                      <div className="content_info">
                        <img src={item.icon} alt="" />
                        <label>{item.name}</label>
                      </div>
                      <div className="content_vice">
                        <label>奖励:{item.coupon / 100}元寄件券</label>
                        <span style={{color: `${item.remainCount <= 20 && 'red'}`}}>剩余次数:{item.remainCount}次</span>
                      </div>
                    </div>
                    <div className="item_footer">
                      <div className="footer_notice">
                        <img src="https://cdn2.jinlb.cn/pic/b8/aa/b8aad9cee7872fde2ca410c901ee50af.png" alt="" />
                        <p>已有<span>{item.completedCount}</span>人做过此任务</p>
                      </div>
                      <span className="icon iconfont iconIcon_right" />
                    </div>
                  </a>
                </li>
              ))}
            </ul>
            ) : (
              <div className="unTask">
                <img src="https://cdn2.jinlb.cn/pic/1d/43/1d43fc645af0b2580ad87f32bc11eae2.png" />
                <p>您已完成全部任务，休息片刻，等待新任务到来</p>
              </div>
            )}
          </div>
          <div className="myTaskBtn_box">
            <button
              className="myTaskBtn"
              onClick={() => location.href="./CouponsMyTask"}
            >
              我的任务
              <span className="icon iconfont iconIcon_right" />
            </button>
          </div>
        </div>
      </div>
    );
  }
}
ReactDOM.render(<CouponsElem />, document.getElementById('app'));
if (module.hot) {
  module.hot.accept();
}

